import { useNetworkMonitorData } from '@/hooks'
import { FIXED_NUM, NETWORK_UNIT } from '@shared/constants'
import ReactECharts from 'echarts-for-react'
import type { ComponentProps } from 'react'

export const NetworkLoadMonitor: React.FC<ComponentProps<'div'>> = (props) => {
  const { currentValue: netWorkLoad, history: networkHistory } = useNetworkMonitorData()

  const option = {
    title: {
      text: '网络负载',
      left: 'center',
      textStyle: {
        fontSize: 16,
        fontWeight: 'bold',
        color: '#475569' // 使用更柔和的颜色
      }
    },
    tooltip: {
      trigger: 'axis',
      formatter: (params: any) => {
        const rx = params?.find((item: any) => item.seriesName === '接收')?.value ?? 0
        const tx = params?.find((item: any) => item.seriesName === '发送')?.value ?? 0
        return `接收: ${Number(rx).toFixed(FIXED_NUM)} ${NETWORK_UNIT}/s<br/>发送: ${Number(tx).toFixed(FIXED_NUM)} ${NETWORK_UNIT}/s`
      },
      backgroundColor: 'rgba(255, 255, 255, 0.95)',
      borderColor: '#e2e8f0',
      borderWidth: 1,
      textStyle: {
        color: '#475569'
      }
    },
    legend: {
      data: ['接收', '发送'],
      bottom: '5%',
      textStyle: {
        color: '#64748b'
      }
    },
    yAxis: {
      type: 'value',
      min: 0,
      axisLabel: {
        formatter: `{value} ${NETWORK_UNIT}/s`,
        fontSize: 10,
        color: '#64748b' // 柔和的轴标签颜色
      },
      axisLine: {
        lineStyle: {
          color: '#e2e8f0'
        }
      },
      splitLine: {
        lineStyle: {
          color: '#f1f5f9'
        }
      }
    },
    xAxis: {
      type: 'category',
      data: networkHistory.map(() => ''),
      axisLabel: {
        show: false
      },
      // name: `${SAMPLEINTERVAL}ms/Tick`,
      // nameGap: 10,
      // nameTextStyle: {
      //   fontSize: 10,
      //   fontWeight: 'normal',
      //   color: '#64748b'
      // },
      axisLine: {
        lineStyle: {
          color: '#e2e8f0'
        }
      }
    },
    series: [
      {
        name: '接收',
        data: networkHistory.map((item) => item.rxRate),
        type: 'line',
        smooth: true,
        lineStyle: {
          color: '#059669', // 使用更现代的绿色
          width: 2
        },
        areaStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              { offset: 0, color: 'rgba(5, 150, 105, 0.3)' },
              { offset: 1, color: 'rgba(5, 150, 105, 0.05)' }
            ]
          }
        }
      },
      {
        name: '发送',
        data: networkHistory.map((item) => item.txRate),
        type: 'line',
        smooth: true,
        lineStyle: {
          color: '#d97706', // 使用更现代的橙色
          width: 2
        },
        areaStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              { offset: 0, color: 'rgba(217, 119, 6, 0.3)' },
              { offset: 1, color: 'rgba(217, 119, 6, 0.05)' }
            ]
          }
        }
      }
    ],
    grid: {
      left: '10%',
      right: '10%',
      bottom: '25%',
      top: '20%'
    }
  }

  return (
    <div
      {...props}
      className={`card bg-white/70 backdrop-blur-sm shadow-lg border border-slate-200/50 hover:shadow-xl transition-all duration-300 ${props.className || ''}`}
    >
      <div className="card-body p-1">
        <div className="h-64">
          <ReactECharts
            option={option}
            style={{ height: '100%', width: '100%' }}
            opts={{ renderer: 'canvas' }}
          />
        </div>
        {netWorkLoad && (
          <div className="text-center mt-4 grid grid-cols-2 gap-4">
            <div className="bg-gradient-to-r from-emerald-50 to-teal-50 rounded-lg p-3">
              <div className="text-sm text-emerald-600 font-medium">接收</div>
              <div className="font-bold text-emerald-700 font-mono">
                {netWorkLoad.rxRate} {NETWORK_UNIT}/s
              </div>
            </div>
            <div className="bg-gradient-to-r from-amber-50 to-orange-50 rounded-lg p-3">
              <div className="text-sm text-amber-600 font-medium">发送</div>
              <div className="font-bold text-amber-700 font-mono">
                {netWorkLoad.txRate} {NETWORK_UNIT}/s
              </div>
            </div>
          </div>
        )}
      </div>
    </div>
  )
}
